<script setup lang="ts">
import { menus } from "@/config/menu"
import { iconMap } from "@/config/icons"

const props = defineProps({
  collapse: Boolean
})
</script>

<template>
  <el-menu
    class="menu"
    background-color="#F5EEDC"
    text-color="#333"
    active-text-color="#ff8c3f"
    router
    :collapse="collapse"
    :default-active="$route.path"
  >
    <!-- 正确写法（推荐） -->
    <el-sub-menu
      v-for="item in menus"
      :key="item.id"
      :index="item.id"
    >
      <template #title>
        <el-icon>
          <component :is="iconMap[item.icon!] ?? iconMap['Default']" />
        </el-icon>
        <span v-show="!collapse">{{ item.title }}</span>
      </template>

      <el-menu-item
        v-for="child in item.children"
        :key="child.id"
        :index="child.index"
      >
        {{ child.title }}
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<style scoped>
.menu {
  border-right: none;
}
</style>
